<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position</title>
</head>
<style>
    .box{
        width:150px;
        height:1000px;
        background-color: skyblue;
        float: left
    }

    .box1{
        width:100px;
        height:100px;
        background-color: orange;
        position: fixed;
        top: 50px;
        left: 20px;
    }

    .box2{
        width:100px;
        height:100px;
        background-color: pink;
        position: relative;
        left: 10%;
        top: 30px;
    }

    .outer{
        width:100px;
        height:100px;
        background-color: pink;
        position: relative;
    }

    .inner{
        width:50px;
        height:50px;
        background-color: gray;
        position: absolute;
        left: 50%;
        top: 50%;
    }

    .box4{
        width:300px;
        height:1000px;
        background-color: skyblue;
        position: relative;
        left: 500px;
    }

    .box3{
        width:200px;
        height:200px;
        background-color: blue;
        position: sticky;
        left: 500px;
        top: 0px;
    }


</style>
<body>
    <!-- 
        position: static(默认) | relative | absolute | fixed | sticky
     -->

     <!-- 
         static 默认值 没有定位，遵循正常的文档流对象
      -->

      <!-- 
          Fixed 元素的位置相对于浏览器窗口是固定位置，即使窗口滚动他也不会移动
            1. fixed定位使元素的位置与文档流无关，因此不占据空间
            2. fixed定位的元素和其他元素重叠
       -->

       <div class="box">我是基准</div>

       <div class="box1">我是fixed元素</div>


       <!-- 
           relative定位  相对定位元素的定位是其相对正常位置
            1. 移动相对定位元素，它原本所占的空间不会改变
            2. 相对定位元素经常被用作为决定定位元素的容器块
            3. 相对定位使用百分比的时候，参照的是最近一层父元素的高度
        -->

        <div class="box2">我是relative元素</div>

        <!-- 
            absolute定位 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素 那么他的位置相对于html
                1. absolute定位使元素的位置与文档流无关，因此不占据空间
                2. absolute定位的元素与其他元素重叠
                3. 绝对定位使用百分比的时候，参照的是最近一层父元素的高度，
                    但父元素不能是static定位；若父元素是static定位，则会一直往上一级查找，直至查询到整个网页的根元素html
         -->

         <div class="outer">
             <div class="inner"></div>
         </div>

         <!-- 
             sticky定位 基于用户的滚动位置来定位
                1. sticky元素仅在其父元素内生效 父元素的高度不能低于sticky元素的高度 父元素不能overflow:hidden或者overflow:auto属性
                2. 依赖于用户的滚动，在position:relative 和 position:fixed定位之间切换
                3. 页面滚动没有超出目标区域的时候，行为就想position:relative ，超过时 行为就想position:fixed
                4. 元素定位表现为在跨越特定阈值（top left right bottom之一）前为相对定位，之后为固定定位
          -->

          <div class="box4">
            <div class="box3">
                我是sticky
            </div>
          </div>

</body>
</html>